<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="comment-list-dialog" v-if="dialogStore.isCommentListDialogVisible">
                <div class="comment-list-dialog__mask" @click="dialogStore.isCommentListDialogVisible = false"></div>
                <div class="comment-list-dialog__content">
                    <div class="comment-list-dialog__title">
                        精彩评论（{{ CommentList.length }}）

                        <img class="icon-close" :src="`${_oss_}images/icon-close-default.png`" @click="onClose" />
                    </div>
                    <div class="comment-list" v-loading="isPageLoading">
                        <div class="comment-item" v-for="(item, index) in CommentList" :key="item.id">
                            <div class="avatar" @click="GoToPageHome(item.uid)">
                                <img :src="item.user.avatar ||
                                    `${_oss_}images/user/default-avatar.png`
                                    " />
                            </div>

                            <div class="right-comment">
                                <div class="comment-top">
                                    <div class="comment-user" @click="GoToPageHome(item.uid)">
                                        {{
                                            item.user.nickname ||
                                            item.user.mobile
                                        }}

                                        <span class="author-tag" v-if="item.is_author">
                                            作者
                                        </span>
                                    </div>

                                    <div class="comment-time">
                                        {{ item.createtime }}
                                    </div>
                                </div>
                                <div class="comment-content">
                                    <div class="content-box" v-html="formatComment(item.comment)"></div>

                                    <img class="icon-delete" :src="`${_oss_}images/icon-delete.svg`" v-if="userStore.userInfo.id == item.uid ||
                                        userStore.userInfo.id ==
                                        item.author_id
                                        " @click="onDelComment(item)" />
                                </div>

                                <div class="comment-tools">
                                    <CommentReplyWorkP :commentId="item.id" :toUid="item.uid" :toUName="item.user.nickname ||
                                        item.user.mobile
                                        " :workId="item.work_id" @success="GetReply(index)" />
                                </div>

                                <CommentReplyWorkListP :commentId="item.id" :workId="item.work_id" :list="item.reply"
                                    @replySuccess="GetReply(index)" @del="(item) => onDelReply(item, index)"
                                    :authorId="item.author_id" v-if="item.reply.length" />
                            </div>
                        </div>

                        <el-empty :image-size="150" description="暂无评论" v-if="!isPageLoading && CommentList.length === 0" />
                    </div>

                    <div class="comment-area">
                        <div class="comment-area__title">评论</div>

                        <div class="comment-box">
                            <img class="avatar" :src="userStore.avatar ||
                                `${_oss_}images/user/default-avatar.png`
                                " />

                            <div class="comment-box__right">
                                <el-input v-model="comment" type="textarea" class="comment-input" resize="none"
                                    :autosize="{ minRows: 4, maxRows: 4 }" maxlength="300" placeholder="说两句吧~"></el-input>

                                <div class="tools">
                                    <EmojiPickerP @select-emoji="onSelectEmoji" />

                                    <div class="btn-group">
                                        <el-button onfocus="this.blur()" type="primary" size="small" @click="onSend"
                                            :loading="isBtnLoading">
                                            发表评论
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>

    <DialogCommentDelP v-model:show="isShowDeleteDialog" :onConfirm="onDeleteConfirm" />
</template>
<script setup>
import { useContent } from ".";

const {
    isShowDeleteDialog,
    isBtnLoading,
    isPageLoading,
    comment,
    CommentList,
    formatComment,
    onClose,
    onSend,
    onSelectEmoji,
    GetReply,
    onDelComment,
    onDeleteConfirm,
    onDelReply,
} = useContent();
const dialogStore = useDialogStore();
const userStore = useUserStore();
</script>
<style lang="scss" scoped>
.comment-list-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 650px;
        height: 90vh;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 10px;
    }

    &__title {
        display: flex;
        align-items: center;
        color: #333;
        padding: 28px 33px 16px 19px;
        font-weight: bold;
        font-size: 18px;

        .icon-close {
            width: 17px;
            height: 17px;
            margin-left: auto;
            cursor: pointer;
        }
    }

    .comment-list {
        height: calc(100% - 202px - 65px - 29px);
        padding: 0 32px;
        overflow: auto;
    }

    .comment-item {
        width: 100%;
        display: flex;
        padding: 12px 0 9px;
        border-bottom: 1px solid #f1f1f1;

        .avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                cursor: pointer;
            }
        }

        .right-comment {
            width: 100%;
            padding-top: 13px;
            margin-left: 15px;
        }

        .comment-top {
            display: flex;
            align-items: flex-end;

            .comment-user {
                display: flex;
                align-items: center;
                color: #333;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;

                .author-tag {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 38px;
                    height: 20px;
                    background: #ffad38;
                    border-radius: 4px;
                    font-size: 12px;
                    margin-left: 4px;
                    color: #fff;
                }
            }

            .comment-time {
                color: #999;
                font-size: 14px;
                margin-left: 20px;
            }
        }

        .comment-content {
            position: relative;

            .content-box {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                font-size: 14px;
                line-height: 20px;
                color: #333;
                margin-top: 15px;
                word-wrap: break-word;
                word-break: break-word;
                padding-right: 20px;

                :deep(img[emoji-icon]) {
                    width: 24px;
                    height: 24px;
                }
            }

            .icon-delete {
                position: absolute;
                top: 2px;
                right: 0;
                width: 14px;

                cursor: pointer;
            }
        }
    }

    .comment-area {
        margin-top: 10px;
        padding: 10px 33px;

        &__title {
            display: flex;
            align-items: flex-end;
            font-weight: bold;
            font-size: 18px;
            color: #333;
        }

        &__small-title {
            color: #999;
            font-size: 14px;
            font-weight: normal;
            margin-left: 3px;
        }

        .btn-group {
            display: flex;
            justify-content: flex-end;

            .el-button {
                width: 70px;
                height: 30px;
                border-radius: 4px;
            }
        }

        .comment-input {
            margin-top: 5px;
        }

        :deep(.el-textarea__inner) {
            background-color: #f1f1f1;
        }
    }

    .comment-box {
        display: flex;
        margin-top: 20px;

        .avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }

        &__right {
            width: 100%;

            .tools {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 13px;
            }
        }
    }
}
</style>
